<template>
  <div class="pages informationlist">
    <div class="pageLevel" v-if="!sub">
      <div class="operationBox tableSearch">
        <el-button type="primary" size="mini" v-if="setRole('发布资讯')" @click="routerPush()">发布资讯</el-button>
      </div>
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="90px" class="demo-ruleForm">
          <el-form-item label="名称搜索:">
            <el-input placeholder="请输入名称" v-model="coundata.storename" size="small"></el-input>
          </el-form-item>
          <el-form-item label="类别搜索:" filterable>
            <el-select v-model="coundata.status" placeholder="全部" size="small">
              <el-option label="全部" value=""></el-option>
              <el-option label="文章" value="0"></el-option>
              <el-option label="视频" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属分类:" filterable>
            <el-select v-model="coundata.classification" placeholder="全部" size="small">
              <el-option label="全部" value=""></el-option>
              <el-option label="婴儿游泳" value="0"></el-option>
              <el-option label="产后护理" value="1"></el-option>
              <el-option label="儿童推拿" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布日期" class="billdata">
            <!-- :default-value="currentime" -->
            <el-date-picker size="small" v-model="coundata.value4" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="" label-width="20px">
            <el-button type="primary" size="mini" @click="counsearch" class="Button">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="releaseTime" :formatter="tim" label="发布时间" align="center">
          </el-table-column>
          <el-table-column prop="title" label="标题" align="center">
          </el-table-column>
          <el-table-column prop="type" :formatter="fenlei" align="center" label="分类">
          </el-table-column>
          <el-table-column prop="imageUrlList" align="center" label="封面">
            <template slot-scope="scope">
              <span v-for="(item, index) in scope.row.imageUrlList" :key="index" style="width:50px height:50px;display:inline-block; margin-right:10px">
                <img :src="item" alt="" style="width:50px;height:50px">
              </span>

            </template>
          </el-table-column>
          <el-table-column prop="name" align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="small" @click="handleEdit(scope.$index,scope.row)" type="text" class="addDetail">查看</el-button>
              <el-button size="small" v-if="setRole('删除')" @click="deletes(scope.$index,scope.row)" type="text" class="delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from '@/util'
import u from '@/util/state'
import { getMessageListPage, deleteMessage } from "@/api";
export default {
  computed: mapState(["sub", "merchantId","power"]),
  data() {
    return {
      fenlei: u.fenlei,
      options: [{}],
      coundata: {
        storename: "",
        status: "",
        classification: "",
        value4: []
      },
      coundatas: {
        storename: "",
        status: "",
        classification: "",
        value4: []
      },
      tableData: [],
      // 分页开始
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1
      // 日期控件
      // currentime: ''
    };
  },
  mounted() {
    this.data();
  },
  watch: {
        sub: {
            handler: function(val, oldVal){
                if (oldVal != null && val == false) {
                  this.data();
                }
            },
            deep: true
        }
    },
  methods: {
      //配置权限
    setRole (key) {
      return util.selectTitle(this.power, key)
     },
    data(picker) {
      // 获取一个月之前的日期
      var nowdate = new Date();
      var datas1 = nowdate.setMonth(nowdate.getMonth() - 1);
      var datase = util.foryear(parseInt(datas1));
      this.coundata.value4.push(datase);
      this.coundatas.value4.push(datase);
      //  获取今天日期
      const dates = new Date();
      var datass = dates.setTime(dates.getTime());
      var datase1 = util.foryear(parseInt(datass));
      this.coundata.value4.push(datase1);
      this.coundatas.value4.push(datase1);
      this.vedio(20, 1);
    },
    // 视频列表
    vedio(pageSize, pageNum) {
      if (this.coundatas.value4.length == 0) {
        this.coundatas.value4.push("");
        this.coundatas.value4.push("");
      }
     let data={
          orgId:this.merchantId,
          keyword:this.coundatas.storename,
          type:this.coundatas.status,
          startTime:this.coundatas.value4[0],
          endTime:this.coundatas.value4[1],
          pageNum:pageNum,
          pageSize:pageSize,
          classify:this.coundatas.classification
      }
      getMessageListPage(data).then(res => {
        this.tableData = res.data.list;
        this.totalItems = res.data.pageTotal;
      });
    },
    // 查询按钮
    counsearch() {
      this.coundatas = this.coundata;
      this.vedio(this.pageSize, this.currentPage);
    },

    getCurrentDate(format) {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      if (month < 10) month = "0" + month;
      if (date < 10) date = "0" + date;
      var time = "";
      //精确到天
      if (format == 1) {
        time = year + "-" + month + "-" + date;
      }
      return time;
    },
    routerPush(name, param) {
      util.routerTo('/operate-management/information-management/information-list/information-add')
    },
    // 查看
    handleEdit(index, rows) {
      if (rows.type == "0") {
        util.routerTo('/operate-management/information-management/information-list/information-articleLook',{ ids: rows.id })
      } else {
        util.routerTo('/operate-management/information-management/information-list/information-videoLook',{ ids: rows.id })
      }
    },
    //转时间戳
    tim(row, column) {
      return util.foryear(row.releaseTime) + ' ' + util.fortime(row.releaseTime)
    },
    // 删除
    deletes(index, rows) {
      this.$confirm("确定要删除吗?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      })
        .then(() => {
          let data = {
            id: rows.id
          };
          deleteMessage(data).then(res => {
           if(res.code=="200"){
              this.vedio(20, 1);
            this.$message({
              type: "success",
              message: res.msg
            });
           }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //跳页
    toPage() {
      this.vedio(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.vedio(this.pageSize, 1);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.vedio(this.pageSize, this.currentPage);
    }
  }
};
</script>
<style>
.billdata .el-date-editor .el-range__close-icon {
  display: none;
}
</style>
